<template>
  <a-col :span="attrs.span">
    <a-row :align="aligin" type="flex" v-bind="$attrs" :class="layout">
      <label
        v-if="attrs.label"
        :class="labelTextAlign"
        :style="{
          width: $attrs.width || 'unset'
        }"
        >{{ attrs.label }}：</label
      >
      <a-col flex="1">
        <slot></slot>
      </a-col>
    </a-row>
  </a-col>
</template>
<script setup>
import { computed, useAttrs, inject } from 'vue'
const attrs = useAttrs()
const context = inject('searchBoxContext') || {}
const layout = computed(() => {
  return attrs.layout || context?.layout
})
const aligin = computed(() => {
  return layout.value === 'vertical' ? '' : 'middle'
})

const labelTextAlign = computed(() => {
  return layout.value === 'vertical' ? 'text-left' : 'text-right'
})
</script>
<style lang="scss" scoped>
label {
  /* font-weight: 300; */
  font-size: 12px;
}
.vertical {
  flex-direction: column;
}
</style>
